<template>
  <div class="changeAvatar_box">
    <my-header :title="$t('lang.upUserImg')" :showBack="true"></my-header>
    <div>
      <avatar @customEvent="rcvMsg"></avatar>
      <div class="footer_btn">
        <van-button type="primary" size="large" @click="modifyAvatar">{{$t("lang.ChangeTheImageBtn")}}</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import avatar from "@/components/avatar.vue";
import header from "@/components/header.vue";
import { Header,Indicator,Toast } from 'mint-ui';
import $ from 'jquery'
export default {
  components: {
    'avatar':avatar,
    'my-header':header
  },
  data () {
    return {
      strDataURI:""
    }
  },
  methods: {
    //从子组件中获得的数据
    rcvMsg:function(msg){
      this.strDataURI=msg
    },
    modifyAvatar(){
      var string=this.strDataURI;
      this.$ajax(this.$api.uploadImagesByBase64,{baseString:string}).then(res=>{
        if(res.code==0){
            this.$ajax(this.$api.modifyCustomerHead, { headImg: res.msg }).then((res) => {
              // console.log(res)
              if (res.code == 0) {
                Toast({ message: this.$t('lang.InfoSuss'), position: "bottom", duration: 3000 });
              }else{
                Toast({ message: this.$t('lang.EditorPError'),  position: "bottom",});
              }
            })
          }
      })
    }
  }
}
</script>

<style>
.changeAvatar_box{
  background:#ffffff;
}
.changeAvatar_box .modify{
  background:#ffffff;
  color:#fff;
  position:fixed;
  bottom:0;
}
</style>